<template>
  <div class="home">
    <div id="demo1"></div>
  </div>
</template>
<script>
// 引入 wangEditor
import WangEditor from 'wangeditor'
export default {
  props: ['content'],
  data () {
    return {
      editor: null,
      editorData: ''
    }
  },
  mounted () {
    const editor = new WangEditor('#demo1')
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
      this.$emit('change', {val: this.editorData})
    }
    // 创建编辑器
    editor.create()
    // 初始化
    editor.txt.html(this.content)
    this.editor = editor
  },
  methods: {
    getEditorData () {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>
<style>
  .home {
    width: 40vw;
    margin: auto;
    position: relative;
  }
</style>
